<template>
  <div class="data-search">
    <el-row :gutter="15">
      <el-col :span="12">
        <chart
        class="box"
          ref="chartRef"
          :fieldPatternId="fieldPatternId"
          :type="searchForm.type"
          :searchForm="searchForm"
          chartId="chartLeft"
        />
      </el-col>
      <el-col :span="12">
        <chart
        class="box"
          ref="chartRef"
          :fieldPatternId="fieldPatternId"
          :type="searchForm.type"
          :searchForm="searchForm"
          chartId="chartRight"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getAllDeviceDataRealtime } from "@/api/platformManage";
import Chart from "./components/charts/thermalMap";
export default {
  name: "overView",
  props: {
    deviceId: {
      type: String,
      default: "",
    },
    deviceName: {
      type: String,
      default: "",
    },
  },
  components: { Chart },
  data() {
    return {
      fieldPatternId:"",
      temp: {
        val: 0,
        evaluate: {
          healthLevelShow: 0,
        },
      },
      hum: {
        val: 0,
        evaluate: {
          healthLevelShow: 0,
        },
      },
      co2: {
        val: 0,
        evaluate: {
          healthLevelShow: 0,
        },
      },
      pm25: {
        val: 0,
        evaluate: {
          healthLevelShow: 0,
        },
      },
      pm10: {
        val: 0,
        evaluate: {
          healthLevelShow: 0,
        },
      },
      searchForm: {},
    };
  },
  filters: {
    tempLevelFil(level) {
      switch (level) {
        case "适宜":
          return "level-a";
        case "偏冷":
          return "level-c";
        case "偏热":
          return "level-d";
        default:
          return "";
      }
    },
    humLevelFil(level) {
      switch (level) {
        case "适宜":
          return "level-a";
        case "微湿":
          return "level-c";
        case "高湿":
          return "level-yellow";
        case "干燥":
          return "level-d";
        default:
          return "";
      }
    },
    co2LevelFil(level) {
      switch (level) {
        case "LEVEL_A":
          return "level-a";
        case "LEVEL_B":
          return "level-b";
        case "LEVEL_C":
          return "level-c";
        case "LEVEL_D":
          return "level-yellow";
        case "LEVEL_E":
          return "level-e";
        case "LEVEL_F":
          return "level-f";
        default:
          return "";
      }
    },
    pm25LevelFil(level) {
      switch (level) {
        case "LEVEL_A":
          return "level-a";
        case "LEVEL_B":
          return "level-b";
        case "LEVEL_C":
          return "level-yellow";
        case "LEVEL_D":
          return "level-d";
        case "LEVEL_E":
          return "level-e";
        case "LEVEL_F":
          return "level-f";
        default:
          return "";
      }
    },
    pm10LevelFil(level) {
      switch (level) {
        case "LEVEL_A":
          return "level-a";
        case "LEVEL_B":
          return "level-b";
        case "LEVEL_C":
          return "level-yellow";
        case "LEVEL_D":
          return "level-d";
        case "LEVEL_E":
          return "level-e";
        case "LEVEL_F":
          return "level-f";
        default:
          return "";
      }
    },
  },
  watch: {
    deviceId(newVal) {
      this.getAllDeviceDataRealtimeFun(newVal);
    },
  },
  mounted() {
     var selectProject = JSON.parse(localStorage.getItem('selectProject'));
    this.fieldPatternId = selectProject.id;
  },
  methods: {
    getAllDeviceDataRealtimeFun(deviceId) {
      getAllDeviceDataRealtime(this.deviceId).then((res) => {
        let data = res.value;
        if (JSON.stringify(data) == "{}") {
          this.temp = null;
          this.hum = null;
          this.co2 = null;
          this.pm25 = null;
          this.pm10 = null;
        } else {
          this.temp = data.TEMPERATURE;
          this.hum = data.HUMIDITY;
          this.co2 = data.CO2;
          this.pm25 = data.PM25;
          this.pm10 = data.PM10;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .clearPadding .vxe-cell {
  padding: 0;
}
::v-deep .clearPaddingLeft .vxe-cell {
  padding-left: 0px;
}
::v-deep {
  .main-el-switch {
    padding: 0px;
    position: relative;
    .el-switch__core {
      width: 60px !important;
      height: 24px;
      border-radius: 2px;
      &:after {
        left: 1px;
        top: 1px;
        height: 20px;
        width: 20px;
      }
    }
    .el-switch__core:after {
      border-radius: 2px;
      margin: 0px;
    }
    &.el-switch {
      &.is-checked {
        .el-switch__core {
          &:after {
            left: 100%;
            margin-left: -21px;
            height: 20px;
            width: 20px;
          }
        }
      }
    }
    &.is-checked {
      .el-switch__label--left {
        opacity: 0;
      }
      .el-switch__label--right {
        opacity: 1;
      }
    }
    .el-switch__label {
      position: absolute;
      top: 0;
    }
    .el-switch__label--left {
      right: 0;
      color: #999;
      z-index: 1;
      // margin-right: 8px;
    }
    .el-switch__label--right {
      left: 0;
      color: #fff;
      opacity: 0;
      // margin-left: 8px;
    }
  }
}
</style>

<style lang="scss" scoped>
.data-search {
  width: 100%;
  padding: 10px 20px;
}
.box{
background-color: #fff;
border-radius: 10px;
}
</style>
